<template>
  <!-- 竖向 导航栏 ==》主要是赛事与活动 -->
  <div>
    <div class="Vnav">
      <el-menu
        :default-active="this.$route.path.substr(1)"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#28b294"
        @select="handleSelect"
        :unique-opened="true"
      >
        <!-- {{mold}} -->
        <template v-for="(v,i) in navArr">
          <template v-if="v.subs">
            <el-submenu :index="i+''" :key="i">
              <template slot="title">
                <i :class="v.icon" v-if="v.icon"></i>
                <i class="xicon" v-else :style="{backgroundImage:'url('+v.xicon+')'}"></i>
                <span>{{v.txt}}</span>
              </template>
              <template v-for="(vv,ii) in v.subs">
                <el-menu-item :index="vv.path" :key="i+'-'+ii">{{vv.txt}}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="v.path" :key="i">
              <i :class="v.icon" v-if="v.icon"></i>
              <template v-else>
                <i class="xicon" v-if="!v.choose" :style="{backgroundImage:'url('+v.xicon+')'}"></i>
                <i class="xicon" v-else :style="{backgroundImage:'url('+v.cxIcon+')'}"></i>
              </template>
              <span slot="title">{{v.txt}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
    <div class="contentWrap">
      <router-view :key="this.$route.path"></router-view>
    </div>
  </div>
</template>

<script>
import a1 from "../../static/image/icons/a1.png";
import a11 from "../../static/image/icons/a11.png";
import a3 from "../../static/image/icons/a3.png";
import a33 from "../../static/image/icons/a33.png";
import a5 from "../../static/image/icons/a5.png";
import a2 from "../../static/image/icons/a2.png";
import a6 from "../../static/image/icons/a6.png";
import a8 from "../../static/image/icons/a8.png";
import a14 from "../../static/image/icons/a14.png";
import a144 from "../../static/image/icons/a144.png";
import a12 from "../../static/image/icons/a12.png";
import a7 from "../../static/image/icons/a7.png";
import a77 from "../../static/image/icons/a77.png";
var M_Arr = [
  {
    xicon: "", // 小图标
    icon: "el-icon-s-home",
    txt: "赛事首页",
    path: "match/matchMsg",
  },
  {
    cxIcon: a11,
    xicon: a1,
    // icon:'el-icon-s-home',
    txt: "赛事发布",
    path: "match/matchPut",
    choose: false,
  },
  {
    xicon: a5,
    // icon:'el-icon-s-home',
    txt: "赛事数据",
    subs: [
      {
        txt: "站点集合",
        path: "match/matchData/siteAll",
      },
      {
        txt: "组别信息",
        path: "match/matchData/basicMsg",
      },
      {
        txt: "轨迹路线",
        path: "match/matchData/trackRoute",
      },
      {
        txt: "赛事天气",
        path: "match/matchData/weather",
      },
      {
        txt: "菜单管理",
        path: "match/matchData/menu",
      },
      {
        txt: "强装清单",
        path: "match/matchData/fitOut",
      },
      {
        txt: "领物信息",
        path: "match/matchData/takeThings",
      },
      {
        txt: "交通信息",
        path: "match/matchData/traffic",
      },
      {
        txt: "酒店信息",
        path: "match/matchData/hotel",
      },
    ],
  },
  {
    xicon: a2,
    // icon:'el-icon-s-home',
    txt: "报名管理",
    subs: [
      {
        txt: "报名表单",
        path: "match/sign/signFrom",
      },
      {
        txt: "报名价格设置",
        path: "match/sign/signPrice",
      },
      {
        txt: "号码牌配置",
        path: "match/sign/entryNumSet",
      },
      {
        txt: "退费设置",
        path: "match/sign/refundRule",
      },
      {
        txt: "选手名单",
        path: "match/sign/playersList",
      },
    ],
  },
  {
    cxIcon: a33,
    xicon: a3,
    // icon:'el-icon-s-home',
    txt: "赛事公告",
    path: "match/matchNotice",
    choose: false,
  },
  {
    xicon: a12,
    // icon:'el-icon-s-home',
    txt: "赛事执行",
    subs: [
      {
        txt: "赛事Live",
        path: "match/carry/live",
      },
      {
        txt: "工作人员",
        path: "match/carry/workPer",
      },
    ],
  },
  {
    xicon: a8,
    // icon:'el-icon-s-home',
    txt: "赛后服务",
    subs: [
      {
        txt: "成绩统计",
        path: "match/end/grade",
      },
      {
        txt: "完赛证书",
        path: "match/end/cer",
      },
      {
        txt: "赛事相册",
        path: "match/end/album",
      },
    ],
  },
  {
    xicon: a6,
    // icon:'el-icon-s-home',
    txt: "营销推广",
    subs: [
      {
        txt: "竞猜抽奖",
        path: "match/extend/guess",
      },
      {
        txt: "banner",
        path: "match/extend/banner",
      },
    ],
  },
  {
    cxIcon: a144,
    xicon: a14,
    // icon:'el-icon-s-home',
    txt: "报名款管理",
    path: "match/money/am_money",
    choose: false,
  },
  {
    cxIcon: a77,
    xicon: a7,
    txt: "留言管理",
    path: "match/feedBack",
    choose: false,
  },
];
var A_Arr = [
  {
    xicon: "", // 小图标
    icon: "el-icon-s-home",
    txt: "活动首页",
    path: "match/matchMsg",
  },
  {
    cxIcon: a11,
    xicon: a1,
    // icon: "el-icon-s-home",
    txt: "活动发布",
    path: "match/matchPut",
  },
  {
    xicon: a5,
    // icon: "el-icon-s-home",
    txt: "活动数据",
    subs: [
      {
        txt: "站点集合",
        path: "match/matchData/siteAll",
      },
      {
        txt: "组别信息",
        path: "match/matchData/basicMsg",
      },
      {
        txt: "轨迹路线",
        path: "match/matchData/trackRoute",
      },
    ],
  },
  {
    xicon: a2,
    // icon: "el-icon-s-home",
    txt: "报名管理",
    subs: [
      {
        txt: "报名表单",
        path: "match/sign/signFrom",
      },
      {
        txt: "报名价格设置",
        path: "match/sign/signPrice",
      },
      {
        txt: "号码牌配置",
        path: "match/sign/entryNumSet",
      },
      {
        txt: "退费设置",
        path: "match/sign/refundRule",
      },
      {
        txt: "选手名单",
        path: "match/sign/playersList",
      },
    ],
  },
  {
    cxIcon: a33,
    xicon: a3,
    // icon: "el-icon-s-home",
    txt: "公告/分享",
    path: "match/matchNotice",
  },
  {
    xicon: a8,
    // icon: "el-icon-s-home",
    txt: "赛后服务",
    subs: [
      {
        txt: "成绩统计",
        path: "match/end/actGrade",
      },
      {
        txt: "成绩证书",
        path: "match/end/cer",
      },
      {
        txt: "活动证书",
        path: "match/end/actcer",
      },
    ],
  },
  // {
  //   xicon: "",
  //   icon: "el-icon-s-home",
  //   txt: "营销推广",
  //   subs: [
  //     {
  //       txt: "竞猜抽奖",
  //       path: "match/extend/guess",
  //     },
  //   ],
  // },
  {
    cxIcon: a144,
    xicon: a14,
    // icon: "el-icon-s-home",
    txt: "报名款管理",
    path: "match/money/am_money",
  },
  {
    cxIcon: a77,
    xicon: a7,
    txt: "留言管理",
    path: "match/feedBack",
    choose: false,
  },
];
export default {
  data() {
    return {
      navArr: [],
    };
  },
  methods: {
    tgNav() {
      let tmp = sessionStorage.getItem("mold");
      if (!tmp) {
        this.$router.replace("/match");
        return false;
      }
      let mold = this.$Base64.decode(tmp);
      if (mold == "S") {
        this.navArr = M_Arr;
      } else if (mold == "H") {
        this.navArr = A_Arr;
      } else {
        this.$router.replace("/match");
      }
      this.navArr.forEach((v) => {
        if (v.xicon) {
          v.choose = false;
          if ("/" + v.path == this.$route.path) {
            v.choose = true;
          }
        }
      });
    },
    handleSelect(key, keyPath) {
      this.navArr.forEach((v) => {
        if (v.xicon) {
          v.choose = false;
          if (v.path == key) {
            v.choose = true;
          }
        }
      });
      if ("/" + key == this.$route.path) return false;
      this.$router.push("/" + key);
    },
  },
  mounted() {
    // console.log(this.mold)
    this.tgNav();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.Vnav {
  width: 200px;
  height: calc(100% - 60px);
  padding-top: 60px;
  position: fixed;
  background-color: #545c64;
  top: 0;
}

.contentWrap {
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 200px - 48px);
  margin-left: 200px;
  height: calc(100% - 32px);
  background-color: #edf0f6;
  padding: 16px 24px;
}

/*滚动条整体样式*/
.contentWrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #f2f2f2;
}
/*滚动条里面小方块*/
.contentWrap::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b4bbc5;
}
/*滚动条里面轨道*/
.contentWrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  /* border-radius: 10px; */
  /* background: #ededed; */
  /* background: #60c5ff; */
}

.xicon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  /* background-size: contain; */
  background-repeat: no-repeat;
  background-position: center;
  /* background-image: url('../images/icons/a1.png'); */
}
</style>